<template>
  <div class="container">
    <div class="table_content">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="集团名称" prop="field1">
          <el-input
            v-model="queryParams.field1"
            placeholder="请输入集团名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="企业名称" prop="field2">
          <el-select
            v-model="queryParams.field2"
            placeholder="请输入或选择企业名称"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="议题名称" prop="field3">
          <el-input
            v-model="queryParams.field3"
            placeholder="请输入议题名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="日期区间" prop="field4">
          <el-date-picker
            v-model="queryParams.field4"
            type="daterange"
            range-separator="|"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        stripe="false"
        height="calc(100% - 7rem)"
        style="width: 100%; font-size: 14px"
        border
        show-summary
        header-row-class-name="table-header"
      >
        <el-table-column label="序号" width="60">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="jtName" label="集团名称" />
        <el-table-column prop="name" label="企业名称" width="280">
          <template #default="scope">
            <span
              class="text-overflow"
              @click="handleView(scope.$index, scope.row)"
              >{{ scope.row.name }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="agendaName" label="议题名称" />
        <el-table-column prop="agendaTime" label="会议时间" width="130" />
        <el-table-column prop="evaluation" label="议题决议" />
        <el-table-column prop="attachment" label="相关附件" width="130" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              size="small"
              text
              @click="handleView(scope.$index, scope.row)"
              style="font-size: 14px; color: #5ecfff"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 40, 80, 100]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="Index" >
const router = useRouter();
import "splitpanes/dist/splitpanes.css";
const currentPage = ref(4);
const pageSize = ref(20);
const size = ref("default");
const background = ref(false);
const disabled = ref(false);

const tableData = ref([
  {
    code: "110000769355935",
    jtName: "北京首都创业集团有限公司",
    name: "北京能源集团有限责任公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    jtName: "北京首都创业集团有限公司",
    name: "北京控股集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    jtName: "北京首都创业集团有限公司",
    name: "北京房地集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    jtName: "北京首都创业集团有限公司",
    name: "北京首都开发控股(集团)有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    jtName: "北京首都创业集团有限公司",
    name: "北京能源集团有限责任公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    jtName: "北京首都创业集团有限公司",
    name: "北京控股集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    jtName: "北京首都创业集团有限公司",
    name: "北京房地集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    jtName: "北京首都创业集团有限公司",
    name: "北京首都开发控股(集团)有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    jtName: "北京首都创业集团有限公司",
    name: "北京能源集团有限责任公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    jtName: "北京首都创业集团有限公司",
    name: "北京控股集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    jtName: "北京首都创业集团有限公司",
    name: "北京房地集团有限公司",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    jtName: "北京首都创业集团有限公司",
    name: "北京首都开发控股(集团)有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    jtName: "北京首都创业集团有限公司",
    name: "北京能源集团有限责任公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    jtName: "北京首都创业集团有限公司",
    name: "北京控股集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    jtName: "北京首都创业集团有限公司",
    name: "北京房地集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    jtName: "北京首都创业集团有限公司",
    name: "北京首都开发控股(集团)有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
  {
    code: "110000769355935",
    jtName: "北京首都创业集团有限公司",
    name: "北京能源集团有限责任公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "嘉亿(北京)股权投资基金管理有限公司股东全部权益价值",
  },
  {
    code: "110000769905140",
    jtName: "北京首都创业集团有限公司",
    name: "北京控股集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京北控交通装备有限公司",
  },
  {
    code: "110000773350504",
    jtName: "北京首都创业集团有限公司",
    name: "北京房地集团有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation: "北京丰台区马家堡东路7号",
  },
  {
    code: "110000782504544",
    jtName: "北京首都创业集团有限公司",
    name: "北京首都开发控股(集团)有限公司",
    agendaName: "研究审议环保集团有关事项的议案",
    agendaTime: "2025年5月26日",
    evaluation:
      "投资性房地产北京市朝阳区柳芳北里乙12号楼1层1-2、2层1-5投资性房地产",
  },
]);

const showSearch = ref(true);
const { proxy } = getCurrentInstance();
const sys_normal_disable = ref([
  {
    label: "正常",
    value: "0",
  },
  {
    label: "停用",
    value: "1",
  },
]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    field1: undefined,
    field2: undefined,
    field3: undefined,
    field4: undefined,
  },
});
const { queryParams } = toRefs(data);

/** 查询按钮操作 */
function handleQuery() {}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 查看
function handleView(index, row) {
  router.push("/index/details?code=" + row.code);
}
// 分页改变事件
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
// 分页点击事件
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: calc(100vh - 110px);
  padding: 10px 15px;
  box-sizing: border-box;
  :deep(.el-table__body) {
    .el-table__row--striped td {
      background-color: #f2f2f2 !important;
    }
  }
  :deep(.el-table) {
    .table-header th {
      background: #6489d2 !important;
      color: #fff;
    }
  }
  .text-overflow {
    color: rgb(94, 207, 255);
    cursor: pointer;
  }
  .table_content {
    height: 100%;
  }
  .default-theme {
    height: calc(100% - 45px);
    .splitpanes__pane {
      overflow: auto;
      border: 1px solid #c2c2c2;
    }
  }
  .demo-pagination-block {
    width: 100%;
    margin-top: 20px;
    padding-right: 10px;
    box-sizing: border-box;
    :deep(.el-pagination) {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: row-reverse;
      align-items: center;
      .is-first {
        margin-left: 16px !important;
      }
    }
  }
  :deep(.el-form) {
    .el-form-item__label {
      font-weight: normal;
    }
  }
  :deep(.el-form--inline) {
    .el-form-item {
      margin-right: 22px;
    }
  }
}
</style>

